<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>hello vue</title>

<script src="vue.js"></script>
<link rel="stylesheet" href="animate.min.css">

</head>
<body>


<ol>
    <li>需求，点击按钮让h3显示/隐藏切换</li>
</ol>


<div id="app">
  
  <button @click='flag=!flag'>h3切换</button>

<!-- <transition enter-active-class="animated bounceIn" leave-active-class="animated bounceOut">
  <h3 v-show="flag">这是一个h3</h3>
</transition>

 -->
<!-- Vue默认统一进出动画的时间=》 :duration="1000" -->
<!-- 分开设置进入和退出的动画时间   :duration="{enter:XXX,leave:XXX}" -->
<transition 
            enter-active-class="bounceIn" 
            leave-active-class="bounceOut" 
            :duration="{ enter:1000,leave:500 }"
          >
  <h3 v-show="flag" class="animated">这是一个h3</h3>
</transition>




</div>


<br>


<script type="text/javascript">



var app = new Vue({
  el: '#app',

  data: {
  	flag:false,
  },

  methods:{

  	


  }

})





</script>

	
</body>
</html>